<template>
	<div class="useropinion">
		<div class="useropinionTitle">修改密码</div>
		<div class="changePassword-Text">
			<div><input type="text" :value="user.userphone" disabled="disabled"></div>
			<div><input type="text" placeholder="请输入密码(6-20位号码字符)" id="changpassword1"></div>
			<div><input type="text" placeholder="请再次输入密码确认" id="changpassword2"></div>
			<div><input type="text" placeholder="验证码" class="piccodeipt" id="piccodeipt">
				<div @click="refreshCode" class="piccodewrap"><piccode :identifyCode="identifyCode" class="piccode"></piccode></div>
			</div>
			<div class="phoneCode"><input type="text" placeholder="手机验证码">
				<div>获取验证码</div>
			</div>
			<div class="changePasswordSubmiat" @click="changePasswordSubmiat">提交修改</div>
			<div class="changeSuc" v-show="isshow==1">恭喜您修改成功</div>
		</div>
	</div>
</template>

<script>
	import piccode from '../components1/picCode.vue'
	export default {
		name: "codetest",
		components: {
			piccode
		},
		data() {
			return {
				identifyCodes: "1234567890",
				identifyCode: "",
				user:[],
				isshow:2,
			};
		},
		created(){
			this.user=this.$store.state.userinfor;
		},
		mounted() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
		},
		methods: {
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						this.randomNum(0, this.identifyCodes.length)
					];
				}
			},
			changePasswordSubmiat(){
				var _this=this;
				var changpassword1=document.getElementById('changpassword1').value;
				var changpassword2=document.getElementById('changpassword2').value;
				var piccodeipt=document.getElementById('piccodeipt').value;
				if(changpassword1!=changpassword2){
					alert('密码不一致')
				}else if(piccodeipt!=this.identifyCode){
					alert('验证码错误')
				}else{
					var userphone=localStorage.getItem("userphone")
					this.$axios.post("http://localhost:3000/userinfor/changepassword",{userphone:userphone,newpassword:changpassword1})
					.then(function(response){
						var list=response.data;
						if(list.code==200){
							_this.isshow=1;
						}
					}).catch(function (error) {
						window.console.log(error);
					})
				}
			}
		}
	}
</script>

<style>
	.changePassword-Text{
		position: relative;
	}
	.changePassword-Text div {
		width: 100%;
		height: 86px;
	}

	.changePassword-Text div input {
		width: 308px;
		height: 42px;
		outline: none;
		margin-top: 40px;
		border: 1px solid #c1c1c1;
		margin-left: 40px;
	}

	.phoneCode {
		position: relative;
	}

	.phoneCode div {
		position: absolute;
		left: 240px;
		top: 48px;
		width: 100px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background: #498e3d;
		color: white;
		cursor: pointer;
	}
	.changePassword-Text .piccodeipt{
		width: 112px;
	}
	.piccodewrap{
		width: 192px;
		height: 34px;
	}
	.s-canvas{
		width: 198px;
		padding-top: 42px;
	}
	.changePassword-Text .changePasswordSubmiat{
		margin-left:40px ;
		margin-top: 40px;
		width: 150px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		background: #f08200;
		cursor: pointer;
		border-radius: 5px;
	}
	.changePassword-Text .changeSuc{
		position: absolute;
		top: 152px;
		left: 500px;
		width:30% ;
		height: 185px;
		background: #c1c1c1;
		line-height: 185px;
		text-align: center;
		border-radius: 10px;
		color:#f08200;
	}
</style>
